<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>投诉管理</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">

    <style>
        .layui-table-view .layui-table-body tr {
            height: 95px;
        }
        .layui-table-cell{
            height:auto;
        }
        .product-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .product-image:hover {
            transform: scale(1.1);
        }
    </style>


</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 搜索区域 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">投诉内容</label>
                            <div class="layui-input-inline">
                                <input type="text" name="description" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">处理状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="1">未处理</option>
                                    <option value="2">已处理</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="complaint-search-btn">
                                <i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <!-- 工具栏 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</button>
            </div>
        </script>

        <!-- 表格展示 -->
        <table class="layui-hide" id="complaintTable" lay-filter="complaintTableFilter"></table>
        <!-- 商品图片列模板 -->
        <script type="text/html" id="imageTpl">
            {{# if(d.faceImageUrl) { }}
            <img src="{{d.faceImageUrl}}" class="product-image" onerror="this.src='../images/default_picture.png'">
            {{# } else { }}
            <img src="../images/default_picture.png" class="product-image">
            {{# } }}
        </script>

        <!-- 行内操作按钮 -->
        <script type="text/html" id="complaintTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

        <!-- 编辑/添加弹窗 -->
        <div id="editComplaint" style="display: none;">
            <div class="layui-form layuimini-form" lay-filter="editComplaintForm">

                <div class="layui-form-item" id="complaintId-laylabel">
                    <label class="layui-form-label required">ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="complaintId"  disabled   placeholder="自动生成" class="layui-input">
                    </div>
                </div>             <div class="layui-form-item">
                    <label class="layui-form-label required">投诉人</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" lay-verify="required" lay-reqtext="投诉人不能为空" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">投诉内容</label>
                    <div class="layui-input-inline">
                        <input type="text" name="description" lay-verify="required" lay-reqtext="投诉内容不能为空" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">投诉对象</label>
                    <div class="layui-input-inline">
                        <input type="text" name="target" lay-verify="required" lay-reqtext="投诉对象不能为空" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">处理状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="1">未处理</option>
                            <option value="2">处理中</option>
                            <option value="3">已处理</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveComplaintBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;

        // 设置全局请求头
        $.ajaxSetup({
            beforeSend: function (xhr) {
                const user = JSON.parse(localStorage.getItem('user'));
                if (user && user.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + user.token);
                }
            }
        });

        // 渲染表格
        table.render({
            elem: '#complaintTable',
            url: '/comp/all',
            toolbar: '#toolbarDemo',
            cols: [[
                { type: "checkbox", width: 50 },
                { field: 'complaintId', width: 80, title: 'ID' },
                { field: 'residentId', width: 80 ,hide: true},
                { field: 'name', width: 80, title: '姓名' },
                { field: 'faceImageUrl', title: '头像', width: 120, templet: '#imageTpl', align: 'center' },
                { field: 'idCard', width: 180, title: '身份证号' },
                { field: 'gender', width: 60, title: '性别', templet: function (d) {
                    return d.gender === 1 ? '男' : '女';
                    } },
                { field: 'phoneNumber', width: 180, title: '联系电话' },
                { field: 'description', width: 200, title: '投诉内容' },
                { field: 'target', width: 150, title: '投诉对象' },
                { field: 'status', width: 120, title: '状态' ,templet: function (d) {
                    if (d.status === 1) {
                        return '<span style="background-color: #e83232;">未处理</span>';
                    }
                    else if (d.status === 2) {
                        return '<span style="background-color: #fffb00;">处理中</span>';
                    }
                    else if (d.status === 3) {
                        return '<span style="background-color: #55ff00;">已处理</span>';
                    }
                    }},
                { fixed: 'right', title: '操作', align: 'center', toolbar: '#complaintTableBar' }
            ]],
            page: true,
            limit: 10,
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.data.total,
                    "data": res.data.list
                };
            },
            lineStyle: 'height: 95px;',
            height: 500
        });

        // 监听搜索
        form.on('submit(complaint-search-btn)', function (data) {
            table.reload('complaintTable', {
                where: data.field,
                page: { curr: 1 }
            });
            return false;
        });

        // 工具栏监听
        table.on('toolbar(complaintTableFilter)', function (obj) {
            if (obj.event === 'add') {
                $("#complaintId-laylabel").show();
                form.val("editComplaintForm", {
                    complaintId: '',
                    description: '',
                    target: '',
                    status: ''
                });
                layer.open({
                    title: '添加投诉',
                    type: 1,
                    content: $('#editComplaint'),
                    area: ['500px', '400px']
                });
            } else if (obj.event === 'delete') {
                var checkStatus = table.checkStatus('complaintTable');
                if (checkStatus.data.length === 0) {
                    layer.msg('请选择要删除的数据');
                    return;
                }
                layer.confirm('确定删除选中的投诉？', function (index) {
                    var ids = checkStatus.data.map(d => d.complaintId);
                    $.post("/comp/delete", { complaintId: ids[0] }, function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功');
                            table.reload('complaintTable');
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 行内编辑与删除
        table.on('tool(complaintTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                $("#complaintId-laylabel").hide();
                form.val("editComplaintForm", data);
                layer.open({
                    title: '编辑投诉',
                    type: 1,
                    content: $('#editComplaint'),
                    area: ['500px', '400px']
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该投诉？', function (index) {
                    $.post("/comp/delete", { complaintId: data.complaintId }, function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功');
                            obj.del();
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 表单提交
        form.on('submit(saveComplaintBtn)', function (data) {
            var field = data.field;
            var url = field.complaintId ? "/comp/update" : "/comp/add";
            $.post(url, field, function (res) {
                if (res.code === 0) {
                    layer.msg(field.complaintId ? '更新成功' : '添加成功');
                    layer.closeAll();
                    table.reload('complaintTable');
                } else {
                    layer.msg(res.msg || '操作失败');
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
